<div id="section">

    <div id="login">

        <?php echo $this->form; ?>

    </div>
    
</div>

<script type="text/javascript">
    $("#<?php echo $this->form->getName(); ?>").validate({
        rules:{
            'username': {
                required: true,
                minlength: 3
            },
            'password' : {
                required:true,
                minlength: 3,
                maxlength: 20,
                alphanumeric:true
            }
        },
        messages:{
            'username': {
                required: "Campo obrigatório.",
                minlength: "O campo deve conter no mínimo 3 caracteres."
            },
            'password' : {
                required: "Campo obrigatório.",
                minlength: "O campo deve conter no mínimo 3 caracteres.",
                maxlength: "O campo deve conter no máximo 20 caracteres.",
                alphanumeric:"O campo deve conter apenas números e letras."
            }
        },
        errorElement: "div",
        wrapper: "div",  // a wrapper around the error message
        errorPlacement: function(error, element) {
            offset = element.offset();
            error.insertBefore(element)
            error.addClass('message');  // add a class to the wrapper
            error.css('position', 'absolute');
            error.css('left', offset.left + element.outerWidth());
            error.css('top', offset.top);
        }
    });
</script>